<template>
  <div class="fullMain">
    <x-header
      :left-options="{ backText: '', showBack: back }"
      :right-options="{ showMore: false }"
      @on-click-more="showMenusOfPersonalInfo = true"
    >
      日程查看
    </x-header>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{ alertText }}</alert>
    </div>
    <!-- 首部导航栏 -->
    <NavigationOfCalendar
      :flagOfCalendar.sync="flagOfCalendar"
    ></NavigationOfCalendar>
    <!-- 底部导航栏 -->
    <NavigationOfReport :flagOfItem.sync="flagOfItem"></NavigationOfReport>
    <!--右下漂浮的两个按钮-->
    <el-button
      class="button"
      style="z-index: 9999"
      type="primary"
      icon="el-icon-plus"
      @click="jumpToS_collection_of_creation"
      circle
    >
    </el-button>

    <!--中间的日历-->
    <div>
      <!--      这里我改了一下显示的数据，适应接口-->
      <full-calendar
        v-if="viewData"
        :events="viewData"
        class="test-fc"
        id="calendar"
        first-day="0"
        locale="fr"
        weekNumbers="false"
        @changeMonth="changeMonth"
        @dayClick="dayClick"
        @eventClick="eventClick"
      ></full-calendar>
    </div>
    <!--下面的日程-->
    <flexbox orient="vertical" class="scheduleFlexbox" style="margin: 10px 2px">
      <flexbox v-for="item in scheduleOfOneDay" :key="item.scheduleId">
        <flexbox-item
          style="
            background-color: #f9f9f9;
            border-radius: 5px;
            padding-bottom: 7px;
            margin: 5px;
          "
        >
          <popover class="moreFun" placement="left">
            <div
              slot="content"
              class="popover-demo-content"
              style="
                background-color: white;
                border: 1px gray solid;
                padding: 8px;
              "
            >
              <span
                @click="modifySchedule(item)"
                style="line-height: 30px; padding: 8px"
                >修&nbsp;改</span
              ><br />
              <span
                @click="deleteSchedule(item.scheduleId)"
                style="line-height: 30px; padding: 8px"
                >删&nbsp;除</span
              >
            </div>
            <button class="btn btn-default">
              <i class="fa fa-ellipsis-v"></i>
            </button>
          </popover>
          <flexbox>
            <flexbox-item :span="1 / 7">
              <img
                src="~static/img/download/schedule/schedule.png"
                height="37"
                width="37"
                alt=""
                style="margin-left: 10px"
              />
            </flexbox-item>
            <flexbox-item>
              <div
                class="flex-demo"
                style="
                  letter-spacing: 0.5px;
                  color: rgb(101, 101, 101);
                  margin-left: 5px;
                  font-size: 15px;
                  font-family: '微软雅黑';
                "
              >
                {{ item.detail.title }}
              </div>
              <div
                class="flex-demo"
                v-if="item.detail.tips"
                style="
                  letter-spacing: 0.5px;
                  color: #a2a2a2;
                  font-size: small;
                  font-family: '微软雅黑';
                "
              >
                <img
                  src="~static/img/download/schedule/note.png"
                  height="10"
                  width="10"
                  alt=""
                  style="margin-left: 5px"
                />
                {{ item.detail.tips }}
              </div>
              <div
                class="flex-demo"
                style="
                  color: #a2a2a2;
                  font-size: small;
                  font-family: '微软雅黑';
                "
              >
                <img
                  src="~static/img/download/schedule/time.png"
                  height="10"
                  width="10"
                  alt=""
                  style="margin-left: 5px"
                />
                {{ item.detail.startDate.slice(0, -3).replace("T", " ") }} 至
                {{ item.detail.endDate.slice(0, -3).replace("T", " ") }}
              </div>
            </flexbox-item>
          </flexbox>
        </flexbox-item>
      </flexbox>
      <flexbox
        v-for="(item, index) in reportActivities"
        :key="index"
        :gutter="5"
      >
        <flexbox-item
          style="
            background-color: #f9f9f9;
            border-radius: 5px;
            margin: 5px;
            padding: 10px 7px 7px 7px;
          "
        >
          <flexbox>
            <flexbox-item :span="1 / 7">
              <img
                src="~static/img/download/schedule/study.png"
                height="40"
                width="40"
                alt=""
                style="margin-left: 5px"
              />
            </flexbox-item>
            <flexbox-item>
              <div class="flex-demo">
                <div
                  style="
                    color: rgb(101, 101, 101);
                    font-size: small;
                    font-family: '微软雅黑 Light';
                    letter-spacing: 0.5px;
                  "
                >
                  <span
                    class="tag_in_calender"
                    style="margin-bottom: 5px; letter-spacing: 0.5px"
                    >{{ item.typeContent }}</span
                  >
                  <span
                    style="
                      font-size: small;
                      color: rgb(191, 191, 191);
                      float: right;
                      margin-right: 10px;
                    "
                    >{{ item.startTime }}--{{ item.endTime }}</span
                  ><br />
                  {{ item.content }}
                  <br />
                </div>
              </div>
            </flexbox-item>
          </flexbox>
        </flexbox-item>
      </flexbox>
    </flexbox>
    <!--底部的留白-->
    <div style="height: 50px"></div>
  </div>
</template>

<script>
import { XHeader, Flexbox, FlexboxItem, Popover } from "vux";
// import { FullCalendar } from 'vue-fullcalendar'
import { mapState } from "Vuex";
import schedule from "api/schedule";
import report from "api/report";
import NavigationOfCalendar from "components/Navigation/NavigationOfCalendar.vue";
import NavigationOfReport from "components/Navigation/NavigationOfReport.vue";
import FullCalendar from "assets/vue-fullcalendar/fullCalendar.vue";
import dateFunc from "assets/vue-fullcalendar/components/dateFunc.js";

export default {
  name: "S_mainview",
  data() {
    return {
      isShowAlert: false, // 是否显示验证提示框
      alertText: "", //提示框内容
      flagOfCalendar: "S_mainview", //顶部导航栏的标识
      flagOfItem: "schedule", //底部导航栏的标识
      reportActivities: "", //存放当天日报中的活动
      scheduleOfOneDay: "", //存放当天所有的日程
      thePickedDay: "", //选中的日期
      viewData: [],
      allSchedules: [], //存放从后端获取的日程数据，view存放在日历上展示需要的，other现在存的是获取的整个result
      colorList: ["red", "orange", "green", "blue"],
    };
  },
  watch: {
    viewData(val) {},
    scheduleOfOneDay(val) {},
  },
  components: {
    XHeader,
    NavigationOfCalendar,
    NavigationOfReport,
    "full-calendar": FullCalendar,
    Flexbox,
    FlexboxItem,
    Popover,
  },
  mounted() {
    this.thePickedDay = this.setToday();
    this.getMyAllSchedule();
    this.getReportOfOneDay();
  },
  computed: {
    ...mapState(["reportContent"]),
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jumpToS_collection_of_creation() {
      this.$router.push({ name: "S_collection_of_creation" });
      this.$store.state.isTag = false;
      this.$store.state.isSchedule = false;
    },
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    // 关闭验证提示框
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
    setToday() {
      let now = new Date();
      let cmonth = now.getMonth() + 1;
      let day = now.getDate();
      let hour = now.getHours();
      if (cmonth < 10) cmonth = "0" + cmonth;
      if (day < 10) day = "0" + day;
      return now.getFullYear() + "-" + cmonth + "-" + day;
    },
    // 选择月份
    changeMonth(start, end, current) {
      // console.log('changeMonth', start, end, current)
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      // console.log('eventClick', event, jsEvent, pos)
      this.showAlert(event.start + "至" + event.end + "：" + event.title);
    },
    // 点击当天
    dayClick(day, jsEvent) {
      // console.log('dayClick', day, jsEvent)
      let year = day.toDateString().substring(11, 15);
      let month = day.toDateString().substring(4, 7);
      let data = day.toDateString().substring(8, 10);
      month = dateFunc.changeMonthToNumber(month);
      this.thePickedDay = year + "-" + month + "-" + data;
      console.log("this.thePickedDay ::" + this.thePickedDay);
      this.getReportOfOneDay();
      this.getScheduleOfOneDay();
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      // console.log('moreCLick', day, events, jsEvent)
    },
    async getScheduleOfOneDay() {
      this.scheduleOfOneDay = [];
      const scheduleResult = await schedule.getScheduleOfOneDay(
        this.thePickedDay
      );
      if (scheduleResult.code === 1) {
        this.scheduleOfOneDay = scheduleResult.data;
      }
      console.log(scheduleResult);
    },
    //改变后端传来的数据
    async getMyAllSchedule() {
      const result = await schedule.getAllSchedule();
      // console.log('RRRRResult')
      // console.log(result)
      if (result.code === 1) {
        result.data.forEach((item) => {
          let viewDataItem = {
            title: "",
            start: "",
            end: "",
            cssClass: "blue",
          };
          viewDataItem.title = item.detail.title;
          viewDataItem.start = item.detail.startDate
            .slice(0, -3)
            .replace("T", " ");
          viewDataItem.end = item.detail.endDate.slice(0, -3).replace("T", " ");
          this.viewData.push(viewDataItem);
          this.allSchedules.push(item);
        });
        // const calendar=document.getElementById('calendar')
        // this.$forceUpdate()
      }
      this.getScheduleOfOneDay();
    },
    async getReportOfOneDay() {
      const result = await report.getReportsByUserId({
        end: this.thePickedDay,
        start: this.thePickedDay,
        userId: this.userInfo.userId,
      });
      if (result.code === 1 && result.data.length === 1) {
        const reportResult = result.data[0];
        this.reportActivities = reportResult.activities;
      }
      // console.log("dayReportTTTTTTTT")
      // console.log(result)
    },
    modifySchedule(item) {
      if (item !== undefined && item !== null) {
        this.$store.state.isSchedule = true;
        this.$store.state.isTag = false;
        this.$store.commit("stageModifySchedule", item);
        this.$router.push({ name: "S_collection_of_creation" });
      }

      console.log("index", item);
    },
    async deleteSchedule(scheduleId) {
      const result = await schedule.deleteOneSchedule(scheduleId);
      console.log(result);
      // if(result.code===1){
      //   this.showAlert(result.data)
      //   setTimeout(this.closeTip,1500)
      // }
      this.viewData = [];
      this.allSchedules = [];
      this.getMyAllSchedule();
    },
  },
};
</script>

<style scoped>
.tag_in_calender {
  font-family: "微软雅黑 Light";
  display: inline-block;
  text-align: left;
  font-size: 17px;
  font-weight: bold;
  color: rgb(101, 101, 101);
}

.moreFun {
  width: 100%;
  text-align: right;
  display: block;
  color: #cccccc;
  font-size: 12px;
  margin-top: 5px;
}

.red {
  background: green;
}

.blue {
  background: blue;
}

.buttonFlex {
  position: fixed;
  bottom: 3rem;
  right: 2rem;
  width: auto;
}

.button {
  position: fixed;
  padding: 20px;
  bottom: 5rem;
  right: 2rem;
}

.button >>> .el-icon-plus:before {
  content: "\E6D9";
  color: #f5f7fa;
  font-size: 25px;
  font-weight: bold;
}

.el-button--primary {
  color: #fff;
  background-color: rgba(26, 188, 156, 0.6);
  border-color: rgba(26, 188, 156, 0.5);
}

.box-card {
  width: auto;
}
</style>
